<template>
    <div class='dialog'>
        <div class='newAdd dialog-con  setchannelinfomation'>
          <split-vertical title="更新商品渠道信息"></split-vertical>
            <div class="channelAD">
                <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="110px" class="demo-ruleForm" inline :label-position="labelPosition">
                  <el-form-item label="渠道名称" prop="channelId">
                     <el-select v-model="add.channelName" placeholder="请选择" @change='getChannel(add.channelName)' disabled>
                        <el-option
                          v-for="(item,index) in channelInfo"
                          :key="index"
                          :label="item.channelName"
                          :value="item.id">
                        </el-option>
                      </el-select>
                  </el-form-item>
                  <!-- <el-form-item label="授权产品ID" prop="channelContact">
                    <el-input v-model="add.id" disabled></el-input>
                  </el-form-item> -->
                  <el-form-item label="联系人" prop="channelContact">
                    <el-input v-model="add.channelContact" disabled></el-input>
                  </el-form-item>
                  <el-form-item label="供应商进价" prop="purchasePrice"  >
                    <el-input v-model.trim="add.purchasePrice" disabled></el-input>
                  </el-form-item>
                  <el-form-item label="联系电话" prop="channelMobile" disabled>
                    <el-input v-model="add.channelMobile" disabled></el-input>
                  </el-form-item>
                  <el-form-item label="商品sku" prop="sku">
                    <el-input v-model="add.sku" disabled></el-input>
                  </el-form-item>
                   <el-form-item label="渠道地址" prop="channelAddress">
                    <el-input v-model="add.channelAddress" disabled></el-input>
                  </el-form-item>
                  <el-form-item label="渠道售价(￥)" prop="channelPrice">
                    <el-input v-model="add.channelPrice"></el-input>
                  </el-form-item>
                  <el-form-item label="渠道商品编号" prop="channelProductNo" >
                    <el-input v-model.trim="add.channelProductNo" ></el-input>
                  </el-form-item>
                  <el-form-item label="金额佣金(%)" prop="commission">
                    <el-input v-model="add.commission"></el-input>
                  </el-form-item>
                   <el-form-item label="渠道商品名" prop="channelProductName">
                    <el-input v-model="add.channelProductName"></el-input>
                  </el-form-item>
                  <el-form-item label="分期佣金(%)" prop="staging">
                    <el-input v-model="add.staging"></el-input>
                  </el-form-item>
                  <el-form-item label="积分佣金(%)" prop="integral">
                    <el-input v-model="add.integral"></el-input>
                  </el-form-item>
                  <el-form-item class="createChannelINfo">
                    <el-button @click="submitForm('ruleForm')" type="primary" size="medium" style="margin-right:20px;">确定</el-button>
                    <el-button @click="cancel"  size="medium">取消</el-button>
                  </el-form-item>
              </el-form>
            </div>
        </div>
    </div>
</template>
<script>
import api from "js/service";
import regular from 'js/regular'
import {localStorage} from 'js/localStorage'
import SplitVertical from "components/common/SplitVertical"
export default {
  inject: ["reload"],
  components:{
    SplitVertical
  },
  data() {
    return {
      options: [{
        value: '选项1',
        label: '黄金糕'
      }],
      //渠道名称列表
      channelInfo:[],
      shopInfomation:{},
      labelPosition:'left',
      channelAddress:'',
      channelMobile:'',
      channelContact:'',
      name: "",
      userId: 1, //录入人
      show: true,
      dis_phone:false,
      dis_people:false,
      ruleForm: {
        channelId:'',
        channelProductName:'',
        channelProductNo:'',
        commission:'',
        integral:'',
        staging:'',
        channelPrice:'',
        name:''
      },
      rules: {
      }
    };
  },
  props:{
    add:{}
  },
  created(){
    this.userId=localStorage.get('userID')
    this.get()
  },
  methods: {
    get(){
      let parmas={
          pageIndex:1,
          pageSize:10
      }
      let success=data=>{
          if(data.code=='OK'){
              this.channelInfo=data.data
          } else{
              this.$message.error(data.msg)
          }   
      }
      api.channelList(parmas,success)
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.confirm()
        } else {
          return false;
        }
      });
    },
    getChannel(val){
      for(var i in this.channelInfo){
          var id=this.channelInfo[i].id
          if(id==val){
            this.add.channelAddress=this.channelInfo[i].channelAddress ||null
            this.add.channelContact=this.channelInfo[i].channelContact ||null
            this.add.channelMobile=this.channelInfo[i].channelMobile ||null
            // console.log(this.add.channelAddress, this.add.channelContact,this.add.channelMobile)
          }
        }
    },
    confirm() {
      if(!regular.code(this.add.channelProductNo)){
          this.$message.warning('只能输入数字和大小写字母')
      }
      let parmas={
        channelId:this.add.channelId,
        channelProductName:this.add.channelProductName,
        channelProductNo:this.add.channelProductNo,
        commission:this.add.commission,
        integral:this.add.integral,
        staging:this.add.staging,
        channelPrice:this.add.channelPrice,
        userId:this.userId,
        id:this.add.id
      }
      let success = data => {
        if (data.code == "OK") {
          this.$message.success("保存成功");
          this.show = false;
          this.reload();
          this.$emit("closeDialog");
        } else {
          this.$message.error(data.msg);
        }
      };
      api.channelProductInfoUpdate(parmas, success);
    },
    cancel() {
      this.$emit("closeDialog");
    },
  }
};
</script>
<style scoped>
 .setchannelinfomation .el-select {
    width:200px;
  }
  .setchannelinfomation .el-input {
    width:200px;
  }
   .setchannelinfomation .el-input--suffix .el-input__inner{
     width:200px;
  }
</style>
<style lang="scss" scoped>
.setchannelinfomation {
    width: 700px;
    height: 500px;
  .companynews {
    h2 {
      height: 60px;
      line-height: 60px;
      text-indent: 20px;
      font-size: 20px;
    }
  }
  .create{
    position: relative;
    left:22%;
    top:30%;
    margin-top: 46px;
  }
  .channelAD{
    margin-left:20px;
  }
  .createChannelINfo{
    width:700px;
    text-align: center;
    display: inline-block;
   
  }
}
</style>

